<template>
    <div>

        <div>
            <p style="font-size:20px;padding:10px 0;margin-right:1140px">服务中的技师</p>
        </div>

        <div class="fwz" style="display:flex; background:white;">
            <div class="fwzc">
                <el-row>
                    <el-col class="pm" :span="1" v-for="(o, index) in 6" :key="o" :offset="index > 0 ? 6 : 0">
                        <el-card :body-style="{ padding: '0px' }">
                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                class="image">
                            <div class="textc">
                                <p>102</p>
                            </div>
                            <div class="textd">
                                <p>1/2</p>
                            </div>
                            <div class="texte">
                                <p>欧迪租到</p>
                            </div>
                            <div class="textf">
                                <img src="../../assets/logo.png" alt="">
                            </div>
                            <div class="textg">
                                <p>1号</p>
                            </div>
                            <div class="texth">
                                <img src="../../assets/logo.png" alt="">
                            </div>

                        </el-card>

                    </el-col>
                </el-row>
            </div>
        </div>


        <div class="amfw" style="display:flex; background:white">
            <div class="njs">
                <p>按摩</p>
            </div>
            <div>
                <el-row>
                    <el-col class="am" :span="1" v-for="(o, index) in 10" :key="o" :offset="index > 0 ? 10 : 0">
                        <el-card :body-style="{ padding: '0px' }" style="cursor:Pointer">
                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                class="image" @click="drawer = true">
                            <div class="texta">
                                <p>好吃的汉堡</p>
                            </div>

                        </el-card>

                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="amfw" style="display:flex; background:white">
            <div class="njs">
                <p>修脚</p>
            </div>
            <div>
                <el-row>
                    <el-col class="am" :span="1" v-for="(o, index) in 10" :key="o" :offset="index > 0 ? 10 : 0">
                        <el-card :body-style="{ padding: '0px' }" style="cursor:Pointer">
                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                class="image">
                            <div class="texta">
                                <p>好吃的汉堡</p>
                            </div>

                        </el-card>

                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="amfw" style="display:flex; background:white">
            <div class="njs">
                <p>足道</p>
            </div>
            <div>
                <el-row>
                    <el-col class="am" :span="1" v-for="(o, index) in 10" :key="o" :offset="index > 0 ? 10 : 0">
                        <el-card :body-style="{ padding: '0px' }" style="cursor:Pointer">
                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                class="image" @click="drawer = true">
                            <div class="texta">
                                <p>好吃的汉堡</p>
                            </div>

                        </el-card>

                    </el-col>
                </el-row>
            </div>
        </div>

        <el-radio-group v-model="direction">

        </el-radio-group>


        <el-drawer :visible.sync="drawer" :direction="direction" :before-close="handleClose" size='50%'>
            <div class="header-content">
                <div class="touxiang">
                    <div class="image"><img src="../../assets/logo.png" alt=""></div>
                    <div class="header-txt">
                        <p>1号技师<span>休假</span></p>
                        <p>工号：898989</p>
                        <p>擅长：指划，毒龙，丝袜，足道，油压，指压</p>
                    </div>
                </div>
                <div class="header-buttom">
                    <el-button type="primary">预约</el-button>
                    <el-button class="cancal">请假</el-button>
                </div>
            </div>
            <div class="review">
                <p class="p1">评价信息</p>
                <div class="service">
                    <p>服务订单:523单</p>
                    <p>综合好评99.99%</p>
                </div>
                <div class="percet">单项好评<span>足道:99.26%</span><span>油压:98.45%</span><span>指压:97.17%</span></div>
            </div>
            <div class="comment">
                <div class="around">
                    <div class="left">
                        <div class="img"><img src="../../assets/logo.png" alt=""></div>
                        <div class="name">
                            <p>圆圆的我</p>
                            <p>欧迪足道</p>
                        </div>
                    </div>
                    <div class="right">
                        <div>
                            <el-rate v-model="value1"></el-rate>
                        </div>
                        <div>
                            <p>2017年7月7日7时7分</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comment">
                <div class="around">
                    <div class="left">
                        <div class="img"><img src="../../assets/logo.png" alt=""></div>
                        <div class="name">
                            <p>圆圆的我</p>
                            <p>欧迪足道</p>
                        </div>
                    </div>
                    <div class="right">
                        <div>
                            <el-rate v-model="value1"></el-rate>
                        </div>
                        <div>
                            <p>2017年7月7日7时7分</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page">
                <el-button type="primary" class="btn1">上一页</el-button>
                <span>1/5</span>
                <el-button type="primary">下一页</el-button>
            </div>
        </el-drawer>




    </div>
</template>

<script>
    export default {
        data() {
            return {
                value1: null,
                value2: null,
                colors: ['#99A9BF', '#F7BA2A',
                    '#FF9900'
                ], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
                input: '',
                // 抽屉
                drawer: false,
                direction: 'rtl',
                // 卡片数据
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        },
        methods: {
            handleClose(done) {
                done();
            }
        }
    }
</script>

<style scoped lang="sass">
    @import '@/css/techniciansNow.scss'
</style>